<template>
	<view>
		<!-- 返回上一页 -->
		<view class="" style="width: 90%;margin:60rpx auto; height: 100rpx; display: flex; align-items: center; ">
			<image @click="toReturn" style="width: 50rpx; height: 50rpx;" src="../../../static/images/goBack.png">
			</image>
			<span style="margin-left: 100rpx;">充值中心</span>
		</view>
		<!-- 充值金额 -->
		<view class="" style="width: 90%;margin: auto;">
			<p style="color: #9f9a96;">充值金额(1元=100阅饼)</p>
		</view>
		<view class=""
			style="display: flex;align-items: center; flex-wrap: wrap; justify-content: space-between;width: 90%;margin:0rpx auto;">

			<view class="" v-for="(item ,index) in dataList" @click="toMember(index,item)"
				:class="active==index? 'active':'active1'" style="position: relative; text-align: center; margin-top: 20px ; 
			   width: 45%;  height: 150rpx; border-radius: 20rpx;">
				<p style="margin-top: 30rpx; color: #000; font-weight: 700;">{{item.price}}</p>
				<p style="color:#9f9a96;">{{item.intro}}</p>
			</view>
		</view>
		<!-- 选择支付方式 -->
		<view class="" style="width: 90%; margin:20rpx auto;">
			<p style="color: #a0a0a0;">选择支付方式</p>
			<radio-group @change="radioChange">
				<label style="  height: 80rpx; display: flex; align-items: center; justify-content: space-between;"
					v-for="(item,index) in dataPayment" :key="index">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 50rpx; height: 50rpx; border-radius: 15rpx;" :src="item.img">
						</image>
						<text style="margin-left: 20rpx;">{{item.name}}</text>
					</view>

					<view>
						<!-- :checked="index === current" -->
						<radio :value="item.value" />
					</view>

				</label>
			</radio-group>
			<button @click=" toVipmoney" style="margin-top: 40rpx; border-radius: 100rpx;  color:#fff; 
			  border:1px solid #e5574b ; font-weight: 600;
			   background: linear-gradient(to right,#f98532,  #f1743a,  #e5574b);">立即充值:{{dataitem}}元</button>
		</view>
		<!-- 温馨提示 -->
		<view class="" style="width: 90%; margin: auto; line-height: 50rpx; font-size:20rpx;color: #9a9a9a;">
			<p style="  margin: 30rpx 0; font-size: 40rpx;font-weight: 600; color: #000;">温馨提示</p>
			<p>1:VIP会员全场图书免费看</p>
			<p>2:充值过程可能会有延迟到账的情况，如果长时间不到账请联系客服。</p>
			<p>3:充值阅读权仅限在本书城使用，充值后不可提现，不可退换</p>
		</view>
	</view>
</template>

<script>
	import {
		getmoneyConfig,
		getvipmoney
	} from "@/http/api.js"
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				active: 0,
				itemID: '',
				dataitem: '',
				dataList: [],
				detailValue: '',
				dataPayment: [{
						name: '支付宝支付',
						img: '../../../static/images/user/zfb.png',
						value: "alipay"
					},
					{
						name: '微信支付',
						img: '../../../static/images/user/wx.png',
						value: "wechat"
					},

				]
			};
		},
		onLoad() {
			this.moneyConfig()
		},
		methods: {
			toVipmoney() {
				this.vipmoney()
			},
			radioChange(e) {
				this.detailValue = e.detail.value
				console.log(e.detail.value);
			},
			vipmoney() {
				if (!this.detailValue) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'success',
						duration: 2000
					});
					return
				}
				let data = {
					"money_id": this.itemID,
					"token": this.userInfo.userinfo.token,
					"paytype": this.detailValue,
				}
				getvipmoney(data).then((res) => {

					if (this.detailValue == 'alipay') {
						console.log("支付宝支付");
						console.log(res[1].data.data, "支付");

						var orderInfo = res[1].data.data; //从服务器获取的订单
						//获取支付宝支付对象
						var alipaySev = null; // 支付宝支付对象
						plus.payment.getChannels(function(channels) {
							for (var i in channels) {
								var channel = channels[i];
								if (channel.id === 'alipay') {
									alipaySev = channel;
								}
							}  
							//发起支付
							plus.payment.request(alipaySev, orderInfo, function(result) {
								var rawdata = JSON.parse(result.rawdata);
								console.log("支付成功");
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 2000
								});
							}, function(e) {
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
								console.log("支付失败：" + JSON.stringify(e));
							});
						}, function(e) {
							uni.showToast({
								title: '获取支付渠道失败',
								icon: 'none',
								duration: 2000
							});
							console.log("获取支付渠道失败：" + JSON.stringify(e));
						});
					} else if (this.detailValue == 'wechat') {
					
						console.log(res[1].data.data, "微信支付");
						var jsonObject = JSON.parse(res[1].data.data);
						console.log(jsonObject,"[[[[[]]]]]");
					


						//订单对象，从服务器获取
						var orderInfo = {
							"appid":jsonObject .appid, // 应用ID（AppID）
							"partnerid":jsonObject .partnerid, // 商户号（PartnerID）
							"prepayid":jsonObject.prepayid, // 预支付交易会话ID
							"package":jsonObject.package, // 固定值
							"noncestr":jsonObject.noncestr, // 随机字符串
							"timestamp":jsonObject.timestamp, // 时间戳（单位：秒）
							"sign":jsonObject.sign // 签名，这里用的 MD5 签名
						};
						//获取支付渠道
						var wxpaySev = null;
						plus.payment.getChannels(function(channels) {
							for (var i in channels) {
								var channel = channels[i];
								if (channel.id === 'wxpay') {
									wxpaySev = channel;
								}
							} 
							//发起支付
							plus.payment.request(wxpaySev, orderInfo, function(result) {
								var rawdata = JSON.parse(result.rawdata);
								console.log("支付成功");
							}, function(e) {
								console.log("支付失败：" + JSON.stringify(e));
							});
						}, function(e) {
							console.log("获取支付渠道失败：" + JSON.stringify(e));
						});


					}


				})
			},
			enerateRandomString(length) {
				let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < length; i++) {
					result += characters.charAt(Math.floor(Math.random() * characters.length));
				}
				return result;
			},
			moneyConfig() {
				getmoneyConfig().then((res) => {
					this.dataList = res[1].data.data
					this.dataitem = res[1].data.data[0].price
					this.itemID = res[1].data.data[0].id
					console.log(res[1].data.data, "充值列表");
				})
			},
			// 返回上一页
			toReturn() {
				uni.navigateBack();
			},
			// 选择充值金额
			toMember(index, item) {
				console.log(item);
				this.itemID = item.id
				// this.itemID= item.id
				this.dataitem = item.price
				this.active = index
			},
		}
	}
</script>

<style lang="scss">
	.active {
		border: 2rpx solid #ca6d67;
		background: #fef4f3;
	}

	.active1 {
		border: 2rpx solid #e7e7e7;
		background: #fff
	}

	.active2 {
		background: #d3c9a4;
		color: #735c1c;
	}

	.active3 {
		background: #f7f7f7;
		color: #686868;
	}

	uni-page-body,
	uni-page-refresh {
		background: linear-gradient(to bottom, #f8f8f8, #fff);
		height: 100%;

	}

	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 30rpx;

	}
</style>